<!DOCTYPE html>
<html>

<head>
	<title>Wonanut 3D</title>
	<style type="text/css">
		body {
			margin: 0;
		}

		canvas {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

<body>
	<script type="importmap">
		{
		  "imports": {
			"three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.js",
			"three/addons/": "https://cdn.jsdelivr.net/npm/three@<version>/examples/jsm/"
		  }
		}
	  </script>
	<script type="module">
		import * as THREE from 'three';

		const scene = new THREE.Scene();
		const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

		const renderer = new THREE.WebGLRenderer();
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild(renderer.domElement);

		const geometry = new THREE.BoxGeometry(1, 1, 1);
		const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
		const cube = new THREE.Mesh(geometry, material);
		scene.add(cube);
		cube.rotation.x += 0.01;
		cube.rotation.y += 0.01;
		camera.position.z = 5;

		function animate() {
			renderer.render(scene, camera);
		}
		renderer.setAnimationLoop(animate);
	</script>
</body>

</html>